<template>
  <div class="login">
    <nut-navbar>
      {{ navbar }} <a slot="back-icon" @click="back()">＜返回首页</a> <a slot="more-icon" @click="help">帮助</a>
    </nut-navbar>
    <nut-avatar class="hd"></nut-avatar>
    <nut-searchbar v-model="username" placeText="账号" :hasSearchButton="false"></nut-searchbar>
    <nut-searchbar type="password" v-model="password" placeText="密码" :hasSearchButton="false"></nut-searchbar>
    <nut-button block shape="circle" @click="doLogin()">登录</nut-button>
    <router-link to="/register" class="toreg">新用户注册</router-link>
  </div>
</template>

<script>
import axios from "../../node_modules/axios"

export default {
  name: "Login",
  data() {
    return {
      navbar: '',
      username: '',
      password: '',
      formroute:''
    }
  },
  methods: {
    doLogin() {
      var param = new URLSearchParams();
      param.append("username", this.username);
      param.append("password", this.password);
      axios.post("/user/login", param).then(
          res => {

            if (res.data.code == 200) {
              this.$cookies.set('username', this.username, '15d');
              this.$cookies.set('addressId', res.data.data.addressId);
              this.$cookies.set('token', res.data.data.token);
              this.$cookies.set('userid', res.data.data.id);
              this.$cookies.set('nikeName', res.data.data.nikename);
              this.$cookies.set('sex', res.data.data.sex);
              this.$cookies.set('avatar', res.data.data.avatar);
              this.$notify.primary('登录成功');
              this.$router.push({name: this.formroute.name,query:this.formroute.query});
            } else {
              this.$notify.danger('密码错误！！');
              this.password = '';
            }
          }
      )
    },
    onFocus() {
    },
    onBlur() {
    },
    back() {
      this.$router.push({name: 'index'})
    },
    help() {
      alert('header头部， 点击编辑')
    }
  },
  mounted() {

    if (this.$cookies.get('username') != null && this.$cookies.get('username') != 'undefined') {
      this.username = this.$cookies.get('username');
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log(to)
    console.log(from)
    next(vm => {
      // 通过 `vm` 访问组件实例
    vm.formroute=from;
    })
  },
}
</script>

<style scoped>
.login {
  width: 90%;
  margin: 10px auto;
}

>>> .nut-navbar {
  background: transparent;
  padding: 0px;
}

>>> .nut-searchbar {
  margin: 20px auto;
  box-shadow: 0px 0px 2px rgba(162, 162, 162, 1);
  border-radius: 25px;
  background: #ffffff;
}

>>> .search-input {
  background: #ffffff;
}

>>> .nut-searchbar .search-input input {
  background-color: #ffffff;
}

>>> .nut-button {
  margin: 22px auto;
  width: 99%;
  margin-left: 2px;
}

>>> .hd {
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px auto;
}

.new {
  position: absolute;
}

.tolink {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.toreg {
  color: #f20000;
  outline: none;
  display: block;
  width: 95%;
  text-align: right;
  font-size: 16px;
}
</style>
